<template>
  <div>
    <div>
      <span>姓：</span> <span>{{ firstName }}</span>
      <span>名：</span> <span>{{  lastName }}</span>
    </div>
    <!-- 表达式 -->
    <div>
      <span>全名：</span> <span>{{ firstName + lastName }}</span>
    </div>
    <!-- 函数 -->
     <div>
      <span>全名(函数)：</span> <span>{{ fullName() }}</span>
     </div>
     <div>
      <span>全名(函数)：</span> <span>{{ fullName() }}</span>
     </div>
     <div>
      <span>全名(函数)：</span> <span>{{ fullName() }}</span>
     </div>
     <!-- computed -->
      <div>
      <span>全名(computed)：</span> <span>{{ fullName1 }}</span>
     </div>
     <div>
      <span>全名(computed)：</span> <span>{{ fullName1 }}</span>
     </div>
     <div>
      <span>全名(computed)：</span> <span>{{ fullName1 }}</span>
     </div>
     <!-- computed  getter  setter-->
      <div>
      <span>全名(computed-getter-setter)：</span> <span>{{ fullName2 }}</span>
     </div>
  </div>
</template>

<script setup>
import { computed, reactive, ref, watch, watchEffect } from 'vue';

const firstName = ref('贾')
const lastName = ref('国龙')


const fullName = () => {
  // console.log('函数调用');
  
  return firstName.value + lastName.value
}

const fullName1 = computed(
  () => {
    // console.log('计算属性调用');
    return firstName.value + lastName.value
  }
)


const fullName2 = computed({
  get() {
    return firstName.value + lastName.value
  },
  set(value) {
    // console.log('@@@@@');
    
    // console.log(value);
    const f = value.slice(0, 1)
    const l = value.slice(1)
    firstName.value = f + '  '
    lastName.value = l
  }
})

setTimeout(() => {
  // fullName2.value = '罗永浩'
  firstName.value = '罗'
  lastName.value = '永浩'
}, 3000);

// 单个值
watch(firstName, (newValue, oldValue) => {
  // console.log('新值：',newValue);
  // console.log('旧值：',oldValue);
  // 监听到值的变化执行其他
})
// 多个值
watch([firstName, lastName], ([fnValue, foValue], [onValue, ooValue]) => {
  // console.log('f新值：',fnValue);
  // console.log('f旧值：',foValue);
  // console.log('o新值：',onValue);
  // console.log('o旧值：',ooValue);
})

const obj = ref({
  title: '标题',
  content: '内容'
})

const obj1 = reactive({
  title: '标题',
  content: '内容'
})

obj1.title = '标题2'

setTimeout(() => {
  // obj.value = {
  //   title: '标题2',
  //   content: '内容2'
  // }
  obj.value.title = '标题2'
}, 1000)
// 对象
watch(obj, (newValue, oldValue) => {
  // console.log('新值：',newValue);
  // console.log('旧值：',oldValue);
  // 监听到值的变化执行其他
}, { deep: true })

watch(firstName, (newValue, oldValue) => {
  console.log('新值：',newValue);
  
}, { immediate: true })

watchEffect(() => {
  console.log('watchEffect');
  console.log('firstName:',firstName.value);
})

</script>

<style scoped>

</style>